<template>
    <div class="gold-shop-wrap">
        <van-nav-bar :title="msg == 1 ? '账户充值' : '押金充值'" left-arrow fixed @click-left="onClickLeft"
            right-text="充值记录" @click-right="onClickRight" />
        <van-tabs v-model="active" title-active-color="#FF6200" color="#FF6200">
            <van-tab title="直接充值" name="0"></van-tab>
            <van-tab title="凭证充值" name="1"></van-tab>
        </van-tabs>
        <van-form @submit="onSubmit" class="aftet-sale-form" v-if="active == '1'">
            <div class="after-sales-title">充值金额</div>
            <!-- </van-field> -->
            <van-field label="￥" label-width="10px" class="field" v-model="amount" name="amount" placeholder="请输入充值金额"
                :rules="[{ required: true, message: '请输入金额' }]" :border="false" />
            <div class="after-sales-title">上传支付凭证</div>
            <van-field name="voucher_urls" label="" :border="false">
                <template #input>
                    <van-uploader v-model="voucher_urls" multiple :max-count="1" :after-read="afterRead"
                        :before-delete="uploadDlete" />
                </template>
            </van-field>
            <div v-for="item, index in configs">
                <div class="after-sales-title">{{ item.title }}</div>
                <div class="card">
                    <div class="card_li" v-for="items, index in item.items">
                        <div>{{ items.left_text }}</div>
                        <div>{{ items.right_text }} <img src="../../images/mine/icon_fz.png" alt=""
                                @click="copyText(item.right_text)"></div>
                    </div>
                </div>
            </div>
            <div class="btns">
                <van-button color="#FF6200" style="border-radius: .16rem;" size="large" round
                    native-type="submit">确定</van-button>
            </div>
        </van-form>
        <van-form @submit="onSubmitDirect" class="aftet-sale-form" v-else>
            <div class="after-sales-title">充值金额</div>
            <!-- </van-field> -->
            <van-field label="￥" label-width="10px" class="field" v-model="amount" name="amount" placeholder="请输入充值金额"
                :rules="[{ required: true, message: '请输入金额' }]" :border="false" />
            <div class="btns">
                <van-button color="#FF6200" style="border-radius: .16rem;" size="large" round
                    native-type="submit">确定</van-button>
            </div>
        </van-form>
    </div>
</template>
<script>
import { getOssParams, uploadImage, uploadDelete } from '@/api/upload';
import { AFTER_SALES_CONFIG, VOUCHER_APPLY, VOUCHER_CONFIG } from '@/api/mine'
import { OSS_TOKEN } from '@/api/cms'
export default {
    data() {
        return {
            fieldValue: '',
            radio: '1',
            fileList: [],
            value1: '',
            active: '0',
            showReason: false,
            columnsReason: [],
            refundReasonName: "",
            refundReasonType: "",
            //
            columns: [],
            show: false,
            refundName: "",
            refundType: "",
            refund_desc: "",
            contact_name: "",
            contact_phone: "",
            voucher_urls: [],
            ossParams: null,

            configs: [],
            amount: '',
            msg: this.$route.query.msg
        };
    },
    mounted() {
        document.title = this.msg == 1 ? '账户充值' : '押金充值'
        this.handleRecharge()
    },
    methods: {
        handleRecharge() {
            this.$http.get(VOUCHER_CONFIG).then(res => {
                this.configs = res.data.configs
            })
        },

        onClickRight() {
            this.$router.push({ name: 'limitAmt', query: { msg: this.msg,type:Number(this.active) } })
        },
        async afterRead(file) {
            try {
                // 获取OSS上传参数
                if (!this.ossParams || this.ossParams.expire_time < Date.now()) {
                    this.ossParams = await getOssParams(this.$http);
                }
                if (!this.ossParams) {
                    throw new Error('OSS参数未正确设置');
                }
                // 调用封装的上传函数
                await uploadImage(file, this.ossParams, this.voucher_urls);
                console.log(this.voucher_urls);

            } catch (error) {
                console.error('处理上传错误:', error);
            }
        },

        uploadDlete(file) {
            this.voucher_urls = uploadDelete(file, this.voucher_urls);
        },
        // 复制文本
        copyText(text) {
            // 创建一个临时的输入元素
            const input = document.createElement('input');
            input.value = text;
            document.body.appendChild(input);
            // 选择输入框中的文本
            input.select();
            input.setSelectionRange(0, 99999); // 对于移动设备

            // 执行复制命令
            document.execCommand('copy');

            // 移除临时输入框
            document.body.removeChild(input);
            this.$toast("复制成功")
        },
        showPopup() {
            this.show = true;
        },
        showPopupReason() {
            this.showReason = true
        },
        onConfirm(values) {
            console.log(values);
            this.refundName = values.name
            this.refundType = values.key
            this.show = false
            this.columnsReason = values.reasons
        },
        onConfirmReason(values) {
            this.refundReasonName = values.name
            this.refundReasonType = values.key
            this.showReason = false
        },
        validatePhone(value) {
            // 简单的手机号正则校验
            const phoneRegex = /^1[3-9]\d{9}$/;
            return phoneRegex.test(value);
        },
        onClickLeft() {
            this.$router.back()
        },
        onConfirm(values) {
            this.refundName = values.name
            this.refundType = values.key
            this.show = false
            this.columnsReason = values.reasons
        },
        onConfirmReason(values) {
            this.refundReasonName = values.name
            this.refundReasonType = values.key
            this.showReason = false
        },
        onSubmit(values) {
            let params = {
                amount: this.amount,
                voucher_url: this.voucher_urls.map(item => item.url)[0],
                type:this.msg==1?0:10
            }
            this.$http.post(VOUCHER_APPLY, params).then(res => {
                if (res.code == 200) {
                    this.$toast.success('提交成功')
                    this.$router.back()
                }
            })
        },
        onSubmitDirect(val) {
            let params = {
                amount: this.amount,
                type:this.msg==1?1:11
                // voucher_url: this.voucher_urls.map(item => item.url)[0]
            }
            this.$http.post(VOUCHER_APPLY, params).then(res => {
                if (res.code == 200) {
                    res.data.payment_info.expired_time = new Date().getTime() + res.data.payment_info.expired_seconds * 1000;
                    res.data.payment_info.msg = 1
                    localStorage.setItem('cashOrder', JSON.stringify(res.data.payment_info))
                    // 去收银台
                    this.$router.push({
                        name: 'levelCashier',
                    })
                }
            })
        }
    },
};
</script>
<style lang="scss" scoped>
.gold-shop-wrap {
    min-height: 100vh;
    padding-top: 46px;
    background: #fff;

    ::v-deep .van-nav-bar .van-icon {
        color: #333333;
    }

    ::v-deep .van-nav-bar__text {
        color: #333;
    }

    ::v-deep .van-nav-bar__arrow {
        font-size: 20px;
    }

    ::v-deep .van-nav-bar__right .van-tabs__line {
        // background-color: #FF6200;
    }
}

.aftet-sale-form {
    width: 93%;
    margin: 0 auto;
    margin-top: .2rem;
}

.after-sales-title {
    padding-top: 0.2rem;
    width: 93%;
    margin: 0 auto;
    margin-bottom: 0.2rem;
    font-size: .28rem;
    color: #666;
}

.aftersales_tip {
    font-size: 0.24rem;
    width: 95%;
    margin: 0 auto;
    color: #999;
    margin-top: 0.3rem;
    line-height: 0.4rem;
}

.field {
    background-color: #F2F4F5;
    border-radius: .16rem;
}

.card {
    background-color: #F2F4F5;
    border-radius: .16rem;
    padding: .32rem;

    .card_li {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-family: PingFangSC, PingFang SC;
        font-style: normal;
        font-size: .28rem;
        font-weight: 400;
        margin-bottom: .32rem;

        div:first-child {
            color: #666666;
        }

        div:last-child {
            color: #333;
            display: flex;
            align-items: center;

            img {
                width: .24rem;
                height: .24rem;
                margin-left: .08rem;
            }
        }
    }

    .card_li:last-child {
        margin-bottom: 0;
    }
}

.btns {
    width: 90%;
    position: absolute;
    bottom: 0.32rem;
    left: 50%;
    transform: translateX(-50%);
}
</style>